<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ranking list</title>
    <style>
    /* 设置整个页面的字体为Arial字体，如果Arial不可用则使用系统默认的无衬线字体，并去除页面的外边距和内边距 */
body {
    font-family: Arial, sans-serif; /* 字体设置 */
    margin: 0; /* 去除外边距 */
    padding: 0; /* 去除内边距 */
}

/* 头部区域的样式，提供背景颜色、内边距、弹性盒子布局、子元素之间的分布和对齐方式，以及底部边框 */
.header {
    background-color: #f8f8f8; /* 设置背景颜色为浅灰色 */
    padding: 10px; /* 设置内边距为10px */
    display: flex; /* 启用弹性盒子布局 */
    justify-content: space-between; /* 子元素分散对齐 */
    align-items: center; /* 子元素垂直居中对齐 */
    border-bottom: 1px solid #e0e0e0; /* 设置底部边框为1px的灰色实线 */
}

/* Logo容器的样式，使用弹性盒子布局，子元素垂直居中 */
.logo {
    display: flex; /* 启用弹性盒子布局 */
    align-items: center; /* 子元素垂直居中对齐 */
}

/* Logo中的图片样式，设置高度和右边距 */
.logo img {
    height: 40px; /* 设置图片高度为40px */
    margin-right: 10px; /* 设置图片的右边距为10px */
}

/* 搜索栏样式，设置弹性布局、子项垂直居中、水平填充和右边距 */
.search-bar {
    flex-grow: 1; /* 允许搜索栏在水平方向上填充可用空间 */
    margin: 0 20px; /* 设置左右边距为20px */
    display: flex; /* 启用弹性盒子布局 */
    align-items: center; /* 子元素垂直居中对齐 */
}

/* 搜索栏中的文本输入框样式，设置内边距、边框、圆角和宽度 */
.search-bar input[type="text"] {
    padding: 10px; /* 设置内边距为10px */
    border: 1px solid #e0e0e0; /* 设置边框为1px的灰色实线 */
    border-radius: 4px; /* 设置圆角为4px */
    width: 100%; /* 设置宽度为100% */
}

/* 搜索栏中的按钮样式，设置内边距、左边距、背景色、边框、圆角和鼠标指针样式 */
.search-bar button {
    padding: 10px; /* 设置内边距为10px */
    margin-left: 10px; /* 设置左边距为10px */
    background-color: #ffd700; /* 设置背景颜色为金色 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 设置圆角为4px */
    cursor: pointer; /* 鼠标悬停时显示手形指针 */
}

/* 导航菜单样式，设置弹性布局和无列表样式 */
.nav {
    display: flex; /* 启用弹性盒子布局 */
    list-style: none; /* 去除列表项的默认标记 */
}

/* 导航菜单中的列表项样式，设置左右边距 */
.nav li {
    margin: 0 15px; /* 设置左右边距为15px */
}

/* 导航菜单中的链接样式，设置无下划线和颜色 */
.nav li a {
    text-decoration: none; /* 去除链接的下划线 */
    color: #333; /* 设置链接颜色为深灰色 */
}

/* 包裹器样式，设置宽度、自动外边距以居中、隐藏溢出内容 */
#wrap{
    width: 1920px; /* 设置宽度为1920px */
    margin: 0 auto; /* 设置自动外边距以使盒子居中 */
    overflow: hidden; /* 隐藏溢出的内容 */
}

/* 导航栏样式，设置宽度、背景色、固定位置、高度、弹性布局和子项垂直居中 */
#nav {
    width: 60px; /* 设置宽度为60px */
    background-color: #f8f8f8; /* 设置背景颜色为浅灰色 */
    position: fixed; /* 固定位置 */
    top: 92px; /* 距离顶部60px */
    height: calc(100% - 60px); /* 高度为视口高度减去60px */
    display: flex; /* 启用弹性盒子布局 */
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 子元素水平居中对齐 */
}

/* 导航栏中的链接样式，设置弹性布局、子项垂直和水平居中、宽度、高度、无下划线、颜色和外边距 */
#nav a {
    display: flex; /* 启用弹性盒子布局 */
    align-items: center; /* 子元素垂直居中对齐 */
    justify-content: center; /* 子元素水平居中对齐 */
    width: 100%; /* 设置宽度为100% */
    height: 60px; /* 设置高度为60px */
    text-decoration: none; /* 去除链接的下划线 */
    color: #333; /* 设置链接颜色为深灰色 */
    margin: 5px 0; /* 设置上下边距为5px */
}

/* 导航栏中的链接在鼠标悬停时的样式，设置背景色 */
#nav a:hover {
    background-color: #e0e0e0; /* 设置背景颜色为更浅的灰色 */
}

/* 导航栏中的激活链接样式，设置背景色 */
#nav a.active {
    background-color: #ffd700; /* 设置背景颜色为金色 */
}

/* 导航栏中的图片样式，设置宽度、高度和右边距 */
#nav img {
    width: 24px; /* 设置宽度为24px */
    height: 24px; /* 设置高度为24px */
    margin-right: 10px; /* 设置右边距为10px */
}
 .nav button {
  padding: 10px; /* 内边距 */
  margin-left: 10px; /* 左侧外边距 */
  background-color: #ffd700; /* 背景颜色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 边框圆角 */
  cursor: pointer; /* 鼠标手型 */
}
/* 容器样式，用于居中对齐文本和设置上边距 */
.vehicle-types-container {
    text-align: center; /* 文本居中 */
    margin-top: 20px; /* 上边距为20px */
}

/* 主要内容容器样式，设置宽度、弹性布局、去除列表样式和内边距 */
#main {
    width: 900px; /* 宽度为900px */
    display: inline-flex; /* 使用内联弹性盒子布局 */
    list-style: none; /* 去除列表项的默认标记 */
    padding: 0; /* 去除内边距 */
}

/* 主要内容容器中的列表项样式，设置右边距和文本居中 */
#main li {
    margin-right: 7px; /* 右边距为7px */
    text-align: center; /* 文本居中 */
}

/* 主要内容容器中的图片样式，设置宽度和高度 */
#main img {
    width: 50px; /* 宽度为50px */
    height: 18px; /* 高度为18px */
}

/* 主要内容容器中的span标签样式，设置块级显示和上边距 */
#main span {
    display: block; /* 设置为块级元素 */
    margin-top: 5px; /* 上边距为5px */
}

/* 选择车辆的容器样式，设置边距和文本居中 */
.select-vehicle {
    margin: 20px; /* 四周边距为20px */
    text-align: center; /* 文本居中 */
}

/* 选择车辆的容器中的选择框和按钮样式，设置内边距和右边距 */
.select-vehicle select,
.select-vehicle button {
    padding: 5px; /* 内边距为5px */
    margin-right: 10px; /* 右边距为10px */
}

/* 广告容器样式，设置高度和清除浮动 */
#ad{
    height: 60px; /* 高度为60px */
    clear:both; /* 清除浮动 */
}

/* 侧边栏容器样式，设置宽度 */
#aside{
    width: 400px; /* 宽度为400px */
}

/* 绝对定位容器样式，设置位置、尺寸、背景色和阴影 */
.container {
    position: absolute; /* 绝对定位 */
    top: 74%; /* 顶部位置为视口高度的50% */
    left: 50%; /* 左侧位置为视口宽度的50% */
    transform: translate(-50%, -50%); /* 通过位移使容器居中 */
    width: 300px; /* 宽度为300px */
    padding: 20px; /* 内边距为20px */
    background-color: white; /* 背景色为白色 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    border-radius: 8px; /* 圆角为8px */
}

/* 绝对定位容器中的标题样式，设置文本居中和下边距 */
.container h2 {
    text-align: center; /* 文本居中 */
    margin-bottom: 20px; /* 下边距为20px */
}

/* 表单组样式，设置下边距 */
.form-group {
    margin-bottom: 15px; /* 下边距为15px */
}

/* 表单组中的标签样式，设置块级显示和下边距 */
.form-group label {
    display: block; /* 设置为块级元素 */
    margin-bottom: 5px; /* 下边距为5px */
}

/* 表单组中的输入框样式，设置宽度、内边距和盒模型尺寸计算方式 */
.form-group input {
    width: 100%; /* 宽度为100% */
    padding: 8px; /* 内边距为8px */
    box-sizing: border-box; /* 盒模型尺寸计算方式，包括边框和内边距 */
}

/* 表单组中的按钮样式，设置宽度、内边距、背景色、文字颜色、边框、圆角和鼠标指针样式 */
.form-group button {
    width: 100%; /* 宽度为100% */
    padding: 10px; /* 内边距为10px */
    background-color: #ddc019; /* 背景色为深黄色 */
    color: white; /* 文字颜色为白色 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角为4px */
    cursor: pointer; /* 鼠标悬停时显示手形指针 */
}

/* 表单组中的按钮在鼠标悬停时的样式，设置背景色 */
.form-group button:hover {
    background-color: #ddc019; /* 背景色为深黄色 */
}

/* 页面字体和背景样式 */
body {
    font-family: Arial, sans-serif; /* 字体为Arial，无衬线字体作为备选 */
    background-color: #f4f4f4; /* 背景色为浅灰色 */
    margin: 0; /* 去除外边距 */
    padding: 0; /* 去除内边距 */
}

/* 容器样式，设置宽度、最大宽度、自动外边距、内边距和背景 */
.container {
    width: 80%; /* 宽度为视口宽度的80% */
    max-width: 1200px; /* 最大宽度为1200px */
    margin: 0 auto; /* 自动外边距以居中显示 */
    padding: 20px; /* 内边距为20px */
    background: #fff; /* 背景色为白色 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 标题样式，设置文本居中和颜色 */
h1 {
    text-align: center; /* 文本居中 */
    color: #333; /* 颜色为深灰色 */
}

/* 表格样式，设置宽度、边框合并和上边距 */
table {
    width: 100%; /* 宽度为100% */
    border-collapse: collapse; /* 边框合并 */
    margin-top: 20px; /* 上边距为20px */
}

/* 表格头部和单元格样式，设置内边距、文本对齐和边框 */
th, td {
    padding: 15px; /* 内边距为15px */
    text-align: left; /* 文本左对齐 */
    border-bottom: 1px solid #ddd; /* 底部边框为1px的浅灰色 */
}

/* 表格头部样式，设置背景色和颜色 */
th {
    background-color: #f2f2f2; /* 背景色为更浅的灰色 */
    color: #333; /* 颜色为深灰色 */
}

/* 表格行在鼠标悬停时的样式，设置背景色 */
tr:hover {
    background-color: #f5f5f5; /* 背景色为浅灰色 */
}

/* 图片样式，设置最大宽度、高度自适应和垂直对齐 */
img {
    max-width: 100px; /* 最大宽度为100px */
    height: auto; /* 高度自适应 */
    vertical-align: middle; /* 垂直对齐 */
}
</style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="./img/logo.png" >
            <select>
                <option>大连</option>
                <option>鞍山</option>
                <option>阜新</option>
                <option>葫芦岛</option>
                <option>沈阳</option>
            </select>
        </div>
        <div class="search-bar">
            <input type="text" placeholder="奔驰">
            <button>搜索</button>
        </div>
        <ul class="nav">
            <li><a href="#">业务合作</a></li>
            <li><a href="#">添加到桌面</a></li>
            <li><a href="#">小程序</a></li>
            <li><a href="#">下载App</a></li>
            <li><a href="#">发布作品</a></li>
            <li><a href="./register.html"><button>登录</button></a></li>
        </ul>
    </div>
    <div id="warp">
    <div id="nav">
        <a href="#" class="active">
            <img src="./img/homepage.png" >
            <span>首页</span>
        </a>
        <a href="./detail.html">
            <img src="./img/selection.png" >
            <span>选车</span>
        </a>
        <a href="#">
            <img src="./img/used.png">
            <span>二手车</span>
        </a>
        <a href="#">
            <img src="./img/video.png">
            <span>视频</span>
        </a>
        <a href="#">
            <img src="./img/advice.png">
            <span>资讯</span>
        </a>
        <a href="#">
            <img src="./img/circle.png">
            <span>车友圈</span>
        </a>
        <a href="Ranking list.html">
            <img src="./img/the charts.png">
            <span>排行榜</span>
        </a>
        <a href="#">
            <img src="./img/broadcast.png">
            <span>直播</span>
        </a>
        <a href="#">
            <img src="./img/tool.png">
            <span>工具</span>
        </a>
        <a href="register.html">
            <img src="./img/my.png">
            <span>我的</span>
        </a>
        <a href="#">
          <img src="./img/tool2.png" >
          <span>反馈</span>
      </a>
    </div>
    <div class="container">
        <h1>车辆热度排行榜</h1>
        <table>
            <thead>
                <tr>
                    <th>排名</th>
                    <th>车型</th>
                    <th>图片</th>
                    <th>热度指数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>特斯拉 Model 3</td>
                    <td><a href="./one.html"><img src="./img/tesla.jpg" ></a></td>
                    <td>9.8</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>宝马 X5</td>
                    <td><a href="./six.html"><img src="./img/benz.jpg" ></a></td>
                    <td>9.2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>奔驰 C级</td>
                    <td><a href="./eight.html"><img src="./img/bmw.jpg"></a></td>
                    <td>8.9</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>奥迪 A6L</td>
                    <td><a href="./seven.html"><img src="./img/audi.jpg" ></a></td>
                    <td>8.7</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>大众 高尔夫</td>
                    <td><a href="./four.html"><img src="./img/public.jpg" ></a></td>
                    <td>8.5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>小米su7</td>
                    <td><a href="./eight.html"><img src="./img/xiaomi.jpg" ></a></td>
                    <td>8.5</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>哈弗H6</td>
                    <td><a href="./five.html"><img src="./img/harvard.jpg" ></a></td>
                    <td>8.5</td>
                </tr>
            </tbody>
        </table>
    </div>
    


</div>

</body>
</html>